<template>
  <div class="result-container">
    <div class="title-wrap">
      <h2 class="title">{{$route.query.q}}</h2>
      <span class="sub-title">找到{{Count}}个结果</span>
    </div>
    <el-tabs v-model="activeIndex">
      <el-tab-pane label="歌曲" name="songs">
        <table class="el-table">
          <thead>
            <th></th>
            <th>音乐标题</th>
            <th>歌手</th>
            <th>专辑</th>
            <th>时长</th>
          </thead>
          <tbody>
            <tr class="el-table__row" v-for="(item,index) in songList" :key="index" @dblclick="playSong(item.id)">
              <td>{{index+1}}</td>
              <td>
                <div class="song-wrap" @dblclick="playSong(item.id)">
                  <div class="name-wrap">
                    <span>{{item.name}}</span>
                    <span class="iconfont icon-mv" v-show="item.mvid!=0" @click="toMv(item.mvid)"></span>
                  </div>
                  <span v-if="item.alias[0]">{{item.alias[0]}}</span>
                </div>
              </td>
              <td>{{item.artists[0].name}}</td>
              <td>{{item.album.name}}</td>
              <td>{{item.duration}}</td>
            </tr>
          </tbody>
        </table>
        <el-pagination
          @current-change="handleCurrentChange"
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="page" 
          :page-size="20" 
          >
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="歌单" name="lists">
        <div class="items">
          <div class="item" v-for="(item,index) in lists" :key="index" @click="toPlayList(item.id)">
            <div class="img-wrap">
              <div class="num-wrap">
                播放量:
                <span class="num">{{item.playCount>100000?parseInt(item.playCount/10000)+'万':item.playCount}}</span>
              </div>
              <img :src="item.coverImgUrl" alt="" />
              <span class="iconfont icon-play"></span>
            </div>
            <p class="name">{{item.name}}</p>
          </div>
        </div>
        <el-pagination
          @current-change="handleCurrentChange"
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="page" 
          :page-size="20" 
          >
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="MV" name="mv">
        <div class="items mv">
          <div class="item" v-for="(item,index) in mvList" :key="index">
            <div class="img-wrap" @click="toMv(item.id)">
              <img :src="item.cover" alt="" />
              <span class="iconfont icon-play"></span>
              <div class="num-wrap">
                <div class="iconfont icon-play"></div>
                <div class="num">{{item.playCount>100000?parseInt(item.playCount/10000)+'万':item.playCount}}</div>
              </div>
              <span class="time">{{item.duration}}</span>
            </div>
            <div class="info-wrap">
              <div class="name">{{item.name}}</div>
              <div class="singer">{{item.artistName}}</div>
            </div>
          </div>
        </div>
        <el-pagination
          @current-change="handleCurrentChange"
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="page" 
          :page-size="25" 
          >
        </el-pagination>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import axios from 'axios'
  import moment from 'moment'
  import connect from '@/evenBus.js'
  export default {
    name: 'result',
    data() {
      return {
        activeIndex: 'songs', // 搜索类型
        limit: 20,
        type: 1,
        total:0,
        page:1,
        songList: [],
        lists:[],
        mvList:[],
        Count: 0,
        inputValue: null
      };
    },

    watch: {
      // 监听Top中的输入框内容
      inputValue() {
        this.searchSongs()
        // this.searchLists()
        // this.searchMvs()
      },
      activeIndex() {
        this.page=1
        // let type = 1
        switch (this.activeIndex) {
          case 'songs':
            this.type = 1
            break
          case 'lists':
            this.type = 1000
            break
          case 'mv':
            this.type = 1004
            break
          default:
            break
        }
        if(this.type==1){
          this.searchSongs()
        }
        else if(this.type==1000){
          this.searchLists()
        }
        else{
          this.searchMvs()
        }
      }
    },

    created() {
      connect.$on('inputValue', item => {
          this.inputValue = item
        }),
        this.searchSongs()
        // this.searchLists()
        // this.searchMvs()
    },
    methods: {
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page=val
        if(this.type==1){
          this.searchSongs()
        }
        else if(this.type==1000){
          this.searchLists()
        }
        else{
          this.searchMvs()
        }
      },
      searchSongs() {
        // 搜索歌曲
        axios({
          url: 'https://autumnfish.cn/search',
          method: 'get',
          params: {
            keywords: this.$route.query.q,
            type: this.type,
            limit: this.limit,
            offset:(this.page-1)*this.limit
          }
          // offset:
        }).then(res => {
          console.log('搜索结果', res)
          this.songList = res.data.result.songs
          this.Count = res.data.result.songCount
          this.total = res.data.result.songCount
          for (var i = 0; i < this.songList.length; i++) {
            let time = moment.duration(this.songList[i].duration)
            let seconds = time._data.seconds > 9 ? time._data.seconds : '0' + time._data.seconds
            this.songList[i].duration = `${time._data.minutes}:${seconds}`
          }
        })
      },
      
      // 搜索歌单
      searchLists() {
        
        axios({
          url: 'https://autumnfish.cn/search',
          method: 'get',
          params: {
            keywords: this.$route.query.q,
            type: 1000,
            limit: this.limit,
            offset:(this.page-1)*this.limit
          }
        }).then(res => {
          console.log('歌单搜索结果', res)
          this.lists=res.data.result.playlists
          this.total=res.data.result.playlistCount
          this.Count = res.data.result.playlistCount
        })
      },
      toPlayList(id){
        this.$router.push(`/playlist?q=${id}`)
      },
      // 搜索mv
      searchMvs() {
        
        axios({
          url: 'https://autumnfish.cn/search',
          method: 'get',
          params: {
            keywords: this.$route.query.q,
            type: 1004,
            limit: this.limit,
            offset:(this.page-1)*this.limit
          }
        }).then(res => {
          console.log('mv搜索结果', res)
          this.mvList=res.data.result.mvs
          this.total=res.data.result.mvCount
          this.Count = res.data.result.mvCount
          for(var i=0;i<this.mvList.length;i++){
            let time = moment.duration(this.mvList[i].duration)
            let seconds = time._data.seconds>9?time._data.seconds:'0'+time._data.seconds
            this.mvList[i].duration = `${time._data.minutes}:${seconds}`
          }
        })
      },
      
      // 播放歌曲
      playSong(id) {  
        axios({
          url: ' https://autumnfish.cn/song/url',
          method: 'get',
          params: {
            id: id
          }
        }).then(res => {
          console.log('播放地址', res)
          this.$parent.musicUrl = res.data.data[0].url
        })
      },
      // 播放mv
      toMv(id){
        this.$router.push(`/mv?q=${id}`)
      }
    }
  };
</script>

<style>

</style>
